<template>
  <div>
    <NuxtLayout name="default">
      <div>
        <div
          class="w-[920px] mt-[48px] mx-auto h-[200px] mb-[33px] rounded-[8px]"
          :style="{
            'background-image': `url(${appStore.getVipBg})`,
            backgroundSize: '920px 200px',
          }"
        ></div>
        <div class="flex w-[920px] mx-auto flex-col" v-if="tabLists.length">
          <div class="mb-[52px]">
            <div class="flex items-center">
              <el-image class="w-[24px] h-[24px]" :src="drawingImg"></el-image>
              <span class="text-[var(--color-btn-text)] text-[16px]"
                >开通会员</span
              ><span class="ml-[10px] text-[#8B8E92] text-[10px]"
                >会员服务为虚拟产品，支付成功后不支持退款</span
              >
            </div>
          </div>
          <div class="tab-lists">
            <div style="display: inline-flex;" class="flex px-[5px] py-[5px] rounded-[25px] bg-[var(--el-bg-color-base)]">
              <div
                class="tab-item"
                v-for="(item, index) in tabLists"
                :key="index"
                :class="{
                  'is-active': currentMode == item.mode,
                }"
                @click="tabChange(item.mode)"
              >
                <span class="w-full">{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="flex-1 min-h-0">
            <component v-if="currentItem" :is="currentItem.component" />
          </div>
        </div>
        <div
          class="w-full h-full bg-[var(--el-bg-color-base)] rounded-[12px] flex items-center justify-center"
          v-else
        >
          <div class="text-xl">功能未开启!</div>
        </div>
      </div>
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
import drawingImg from "@/assets/images/icon/drawing.png";
import OpenVip from "@/assets/images/drawing/nj.png";
import { useAppStore } from "~/stores/app";
import Vip from "./_components/vip.vue";
import Recharge from "./_components/recharge.vue";
import RedeemCode from "./_components/redeem-code.vue";
const appStore = useAppStore();
const router = useRouter();
const route = useRoute();

const tabLists = computed(() => {
  const tabs = [
    {
      name: "开通会员",
      show: appStore.getIsShowVip,
      mode: "vip",
      component: markRaw(Vip),
    },
    {
      name: "余额充值",
      show: appStore.getIsShowRecharge,
      mode: "recharge",
      component: markRaw(Recharge),
    },
    {
      name: "卡密兑换",
      show: appStore.getCardCodeConfig.is_open,
      mode: "redeem_code",
      component: markRaw(RedeemCode),
    },
  ];
  return tabs.filter((item) => !!item.show);
});
const mode = route.query.mode as string;
const currentMode = ref(mode);
const tabChange = (mode: string) => {
  currentMode.value = mode;
  router.replace({
    path: "",
    query: {
      mode: mode,
    },
  });
};
const currentItem = computed(() => {
  return tabLists.value.find((item) => item.mode === currentMode.value);
});
watch(
  tabLists,
  (value) => {
    if (!currentItem.value && value.length) {
      const [first] = value;
      currentMode.value = first.mode;
    }
  },
  {
    immediate: true,
  }
);

watch(
  () => route.query.mode,
  (value: string) => {
    currentMode.value = value;
  }
);
definePageMeta({
  auth: true,
  layout: false,
});
</script>

<style lang="scss" scoped>
.tab-lists {
display: flex;
justify-content: center;
  .tab-item {
    display: flex;
    width: 132px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    color:var(--color-text-base);
    &.is-active {
      @apply text-btn-text bg-primary;
    }
  }
}
</style>
